<template>
	<view>
		<!-- <uni-popup type="none" ref="video"> -->
		<view v-if="show" class="preview-view" style="overflow-y: hidden;" @touchmove.stop="clear">
			<custom :pageBack="true" @goback="close" background="#000000" titleColor="#FFFFFF" backColor="#FFFFFF"
				:title="title" mode="2">

				<!-- 	<view @tap.stop="mycopy(src)" class="fs-24 color-ffffff" style="transform: translateX(-50rpx);" slot="right">
						复制链接
					</view> -->

			</custom>
			<video @loadedmetadata="loadedmetadata" @play="loadedmetadata"
				:style="{height:'calc(100vh - '+customBar+')'}"
				style="width: 100vw;position: relative;background-color: #FFFFFF;" :src="src" v-if="src"
				:autoplay="true" :show-fullscreen-btn="true" :enable-progress-gesture="true" :enable-play-gesture="true"
				:controls="true">
				<!-- <cover-view @click="close" :style="{top:statusbar}"
						class="iconfont icon-zuojiantoubeifen color-ffffff fs-40 video-back"></cover-view> -->
			</video>
		</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	export default {
		name: "previewVideo",
		data() {
			return {
				statusbar: getApp().globalData.statusBar + 10 + 'px',
				customBar: getApp().globalData.customBar + 'px',
				src: '',
				title: '',
				show: false,
			};
		},
		methods: {
			open(obj) {
				if (obj.src) {
					this.src = obj.src;
					this.title = '视频加载中......'
					// this.$refs.video.open();
					this.show = true;
				}
			},
			close() {

				// this.$refs.video.close();
				this.show = false;
				this.src = '';
			},
			loadedmetadata() {
				this.title = '';

			},
		}
	}
</script>

<style lang="scss">
	.preview-view {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		position: fixed;
		z-index: 999999;
		top: 0;
		left: 0;
	}

	.video-back {
		position: absolute;
		line-height: 70rpx;
		text-align: center;
		min-width: 70rpx;
		padding: 0 14rpx;
		border-radius: 40rpx;
		background-color: rgba(0, 0, 0, 0.2);
		text-align: center;
		left: 20rpx;
	}
</style>